<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <script type="text/javascript" src="lib/vue.js"></script>
  <link rel="stylesheet" href="lib/swiper/css/swiper.css">
  <script src="lib/swiper/js/swiper.js"></script>
  <style>
    .swiper-container {
      width: 600px;
      height: 300px;
    }
  </style>
</head>

<body>

  <div id="box">

    <div class="swiper-container a">

      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="data in datalist">
          {{data}}
        </div>
      </div>

      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>

  </div>

  <script type="text/javascript">

    new Vue({
      el: "#box",
      data: {
        datalist: [],
        temp:1
      },

      mounted() {
        setTimeout(() => {
          this.datalist = ["1111", "2222", "33333"] // 状态改完， 异步更新dom
          // console.log(document.querySelectorAll(".swiper-slide").length)
          console.log(this.datalist.length)//3

          // 在下次 DOM 更新循环结束之后执行延迟回调
          Vue.nextTick(function () {
            // DOM 更新了
            console.log("DOM更新了");

            // /* vue的dom渲染是异步的（有了数据并不意味着立刻有dom） */
            // new Swiper('.a', {
            //   // direction: 'vertical'
            //   loop: true,

            //   // 如果需要分页器
            //   pagination: {
            //     el: '.swiper-pagination',
            //   }
            // })
            // console.log("swiper对象已创建");
          })

        }, 2000)

      },

      updated() {
        console.log("updated");
        new Swiper ('.a',{
            // direction: 'vertical'
            loop:true,

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            }
          })
      },

    })

  </script>
</body>

</html>